<template>
	<div class="main">
		<div class="main-search">
			<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="114px">
				<el-form-item label="知识点编号" prop="knowledgePointsNo">
					<el-input
						v-model="queryParams.knowledgePointsNo"
						placeholder="请输知识点编号"
						clearable
						style="width: 200px"
						@keyup.enter="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="关联题目ID" prop="exercisesNo">
					<el-input
						v-model="queryParams.exercisesNo"
						placeholder="关联题目ID"
						clearable
						style="width: 200px"
						@keyup.enter="handleQuery"
					/>
				</el-form-item>
				<el-form-item prop="course">
					<aselect title="关联课程" @clear="courseReturn_" :course="queryParams.courseSectionNo_" @change="courseReturn_"></aselect>
				</el-form-item>
				<el-form-item label="考试频度" prop="frequencys">
					<el-select multiple style="width: 200px" v-model="queryParams.frequencys">
						<el-option
							v-for="(item, index) in frequencyList"
							:key="index"
							:label="item.value"
							:value="item.key"
						/>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button :icon="Search" type="primary" @click="handleQuery">搜索</el-button>
				</el-form-item>
			</el-form>
		</div>

		<div style="width: 260px;float: left;border: 0;background: white;margin: 0 10px" v-for="item in list">
			<graph :direct="item"></graph>
		</div>


		<el-pagination
			v-model:current-page="queryParams.pageNum"
			:page-size="queryParams.pageSize"
			:total="total"
			background
			layout="total, prev, pager, next, jumper"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		/>
	</div>
</template>
<script setup lang="ts">

import graph from '../components/index.vue'
import aselect from '../../common/aselect/index.vue';
import { Search } from '@element-plus/icons-vue';
import { onMounted, reactive, ref } from 'vue';
import { getFrequencyCombobox,searchKnowledgePointsChart } from '/@/api/knowledge';
const total = ref(0);
const queryParams = reactive({
	"courseNo": "",
	"courseSectionNo": "",
	"courseSectionNo_": [],
	"exercisesNo": "",
	"frequencys": [],
	"knowledgePointsNo": "",
	"pageNum": 1,
	"pageSize": 5
});
const list = ref([]);
const frequencyList = ref([]);
const courseReturn_ = (params) => {
	if (params) {
		let list = params.split(",");
		queryParams.courseSectionNo = list.length > 0?list[list.length - 1]:'';
	} else {
		queryParams.courseSectionNo = '';
	}
}
const handleQuery = async () => {
	queryParams.pageNum = 1;
	list.value = [];
	await getList();
};
const getList = async () => {
	let res = await searchKnowledgePointsChart(queryParams);
	list.value = res.data.list;
	total.value = res.data.total
}
const handleSizeChange = async (val: number) => {
	queryParams.pageSize = val;
	list.value = [];
	await getList();
}
const handleCurrentChange = async (val: number) => {
	queryParams.pageNum = val;
	list.value = [];
	await getList();
}
onMounted(async () => {
	let res = await getFrequencyCombobox();
	frequencyList.value = res.data;
	await getList();
});

</script>
<style scoped lang="scss">

</style>

